<template>
	<view>
		<view style="width: 100%;">
			<scroll-view :style="{height: height+'px'}" scroll-y>
				<view class="" v-for="item in messages">
					
				<view :class="userInfo.id==item.id?'myMsgBox':'ortherMsgBox'" v-if="item.type==1">
					<view class="userInfo">
						<view class="username">
							{{item.name}}
						</view>
						<view class="text">
							<text>{{item.msg}}</text>
						</view>
					</view>
					
					<view class="userheader">
						<image class="showimg" src="/static/navImg/1.jpg" mode="aspectFill"></image>
					</view>	
				</view>
				<view class="sysMsg" v-if="item.type==0">
					{{item.msg}}进入房间
				</view>
				</view>
				
			</scroll-view>
		</view>
				<view class="footer" ref="footer" id="footer">
					<view class="content-wrap">
						<textarea class="content" v-model="text" maxlength="-1" auto-height />
					</view>
					<view class="btn-wrap">
						<button class="btn" :disabled="disable" :class="{'disabled': disable}" @click="handleSend">发送</button>
					</view>
				</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: '',
				height: 0,
				pageHeight: 0,
				disable: true,
				footerHeight: 0,
				keyBoardHeight: 0,
				messages: [
					// {name:"爱丽丝", id:2017, msg:"今天天气真好", type:1},
					// {name:"system", id:0, msg:"琳达", type:0},
					// {name:"琳达", id:2018, msg:"是啊", type:1},
				],
				user_id:2017,
				socketOpen: false,
				userInfo:{name:"爱丽丝", id:2017},
			};
		},
		created(){
			
			// console.log(777777777777)
			
			uni.getStorage({
				key: 'userInfo',
				success: res => {
					// console.log(res.data);
					// console.log(this.userInfo);
					this.userInfo = res.data
				}
			});
			
			uni.connectSocket({
			  url: basicConfig.websocket,
			  success: (res) => {
			  	console.log('链接成功')
			  }
			});
			var that = this
			uni.onSocketOpen((res)=> {
			  this.socketOpen = true;
			  // for (var i = 0; i < socketMsgQueue.length; i++) {
			  //   sendSocketMessage(socketMsgQueue[i]);
			  // }
			  // socketMsgQueue = [];
			  var data = {name:"system", id:0, msg:this.userInfo.name, type:0}
			  // console.log('链接发消息')
			  this.sendSocketMessage(data);
			});
			
			
			uni.onSocketMessage(function (res) {
			  // console.log('收到服务器内容：' + res.data);
			  if (res.data){
				  that.messages.push(JSON.parse(res.data))
			  }
			  
			})
		},
		// beforeDestroy(){
		// 	uni.onSocketClose(function (res) {
		// 	  console.log('WebSocket 已关闭！');
		// 	});
		// },
		methods: {
			sendSocketMessage(msg) {
				// console.log('发消息', this.socketOpen)
			  if (this.socketOpen) {
			    uni.sendSocketMessage({
			      data: JSON.stringify(msg)
			    });
				// console.log('发送消息',)
			  } else {
			    console.log('socketOpen==false')
			  }
			},
			initListener() {
				//监听键盘的高度变化，让sroll-view的高度随之变化
				uni.onKeyboardHeightChange(res => {
					let keyBoardHeight = res.height
					if (this.keyBoardHeight == 0 && keyBoardHeight > 0) {
						this.keyBoardHeight = keyBoardHeight
					}
					if (keyBoardHeight > 0) {
						this.height = this.height - this.keyBoardHeight
					} else {
						this.height = this.height + this.keyBoardHeight
					}
				})
			},
			
			handleLeftClick() {
			},
			handleSend() {
				// console.log(this.text)
				if(this.text){
					var msg = {name:this.userInfo.name, id:this.userInfo.id, msg:this.text, type:1}
					this.sendSocketMessage(msg)
					this.text = ""
				}
				
			}
		},
		onUnload() {
			// this.destoryListener()
			// console.log('页面卸载')
			 uni.closeSocket();
			uni.onSocketClose((res)=> {
			  console.log('WebSocket 已关闭！');
			});
		},
		
		
		watch: {
				//监听text，当他有值时发送按钮才可以点击
				text(newVal) {
					if (newVal.trim() != '') {
						this.disable = false
					} else {
						this.disable = true
					}
				}
			},
			onReady() {
				//获取整个页面的高度，从而计算出页面可用的高度，因为使用了自定义的navbar所以this.pageHeight不是单纯的res.windowHeight。（ps: uview组件的navbar高度是固定的44px,不包括statusBarHeight）
				uni.getSystemInfo({
					success: (res) => {
						this.pageHeight = res.windowHeight - res.statusBarHeight //- 44
					}
				})
			},
			onLoad() {
				this.initListener()
			},
			
			mounted() {
				// var userInfo = 
				
				// console.log('====', this.userInfo)
				//这里获取footer元素的高度，根据不同平台用的方式不同，对于uniapp的dom定位方法应该是通用的。特别注意，一定要在this.$nextTick方法里写，不然可能页面还没渲染出footer元素
				this.$nextTick(() => {
					// #ifdef H5
					this.footerHeight = this.$refs.footer.$el.offsetHeight
					this.height = this.pageHeight - this.footerHeight
					// console.log(this.footerHeight, this.height)
					// #endif
					// #ifdef APP-PLUS
					uni.createSelectorQuery().in(this).select("#footer").boundingClientRect((data) => {
						this.footerHeight = data.height
						this.height = this.pageHeight - this.footerHeight
					}).exec()
					// #endif
				})
				
				
			},
			
		

	}
</script>

<style lang="scss">
	.sysMsg{
		display: flex;
		justify-content:center;
		width: 70%;
		word-break: break-word;
		background-color: #E9EDF4;
		font-size: 20rpx;
		color: gray;
		margin: 20rpx auto;
		border-radius: 10rpx;
		
	}
	.myMsgBox{
		display: flex;
		justify-content: flex-end;
		margin-right: 10rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		.userInfo{
			display: flex;
			// border: 1rpx solid red;
			max-width: 500rpx;
			flex-direction: column;
			justify-content: flex-end;
			
		.username{
			font-size: 20rpx;
			color: gray;
			text-align: right;
		}
		.text{
			margin-right: 30rpx;
			word-break: break-word;
			background-color: #FFFFFF;
			padding: 10rpx 10rpx;
			margin-top: 20rpx;
		}
		
		}
		.userheader{
			image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		
		}
	}
.ortherMsgBox{
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-end;
		margin-left: 10rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		.userInfo{
			display: flex;
			// border: 1rpx solid red;
			max-width: 500rpx;
			flex-direction: column;
			justify-content: flex-start;
			
		.username{
			font-size: 20rpx;
			color: gray;
			text-align: left;
		}
		.text{
			margin-left: 30rpx;
			word-break: break-word;
			background-color: #FFFFFF;
			padding: 10rpx 10rpx;
			margin-top: 20rpx;
		}
		
		}
		.userheader{
			image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		
		}
	}
	
.footer {
		width: 100%;
		background-color: #E9EDF4;
		display: flex;
		position: fixed;
		bottom: 0;
	}

	.footer .content-wrap {
		width: 78%;
		margin-left: 2%;
	}

	.footer .content {
		width: 100%;
		box-sizing: border-box;
		margin: 14rpx 0;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		padding: 16rpx;
		caret-color: #01B4FE;
	}

	.footer .btn-wrap {
		width: 18%;
		margin-right: 2%;
	}

	.footer .btn {
		width: 15%;
		height: 65rpx;
		font-size: 26rpx;
		margin-left: 2%;
		background-color: #01B4FE;
		color: #FFFFFF;
		position: fixed;
		bottom: 14rpx;
		border: 0;
		outline: none;
	}

	.footer .btn-wrap .disabled {
		background-color: #aae8f5;
	}

	/deep/ .uni-textarea-wrapper {
		max-height: 180rpx;
	}

</style>
